<template>
  <div ref="resource">
    <!-- 资源保存按钮 -->
    <!-- <Button type="primary" @click.native="resourceSave">保存资源</Button>
    <Divider /> -->

    <!-- 资源树 -->
    <!-- <Row> -->
    <!-- <XCol :md="24" :lg="10"> -->
    <!-- <Tree :data="resource.resourceListSta" :render="renderContent"></Tree> -->
    <!-- <Tree :data="data1" :render="renderContent"></Tree>
      </XCol>
    </Row> -->

    <!-- 编辑资源 -->
    <ResourceEdit></ResourceEdit>
  </div>
</template>

<script>
// import { Row, Col, Tree, Button, Divider } from "iview";
import { mapMutations } from "vuex";
import ResourceEdit from "./ResourceEdit"; //编辑资源

export default {
  name: "Resource",
  data() {
    return {
      data1: [
        {
          title: "默认根节点",
          expand: true,
          render: (h, { data }) => {
            return h(
              "span",
              {
                style: {
                  display: "inline-block",
                  width: "100%"
                }
              },
              [
                h("span", [
                  h("Icon", {
                    class: "ivu-icon ivu-icon-ios-photos",
                    style: {
                      marginRight: "8px"
                    }
                  }),
                  h("span", data.title)
                ]),
                h(
                  "span",
                  {
                    style: {
                      display: "inline-block",
                      float: "right",
                      marginRight: "10px"
                    }
                  },
                  [
                    h(
                      "Button",
                      {
                        class: "ivu-btn ivu-btn-primary",
                        style: {
                          width: "155px",
                          padding: 0,
                          marginRight: "10px"
                        }
                      },
                      [
                        h("Icon", {
                          class: "ivu-icon ivu-icon-md-add",
                          style: {
                            lineHeight: "30px"
                          },
                          on: {
                            click: () => {
                              this.resourceAdd(data); //根节点新增
                            }
                          }
                        })
                      ]
                    )
                  ]
                )
              ]
            );
          },
          children: [
            {
              title: "child 1-1",
              expand: true,
              children: [
                {
                  title: "leaf 1-1-1",
                  expand: true
                },
                {
                  title: "leaf 1-1-2",
                  expand: true
                }
              ]
            },
            {
              title: "child 1-2",
              expand: true,
              children: [
                {
                  title: "leaf 1-2-1",
                  expand: true
                },
                {
                  title: "leaf 1-2-1",
                  expand: true
                }
              ]
            }
          ]
        }
      ]
    };
  },
  created() {
    let _self = this;
    let obj = {};
    this.$axios.post("/acl_resource/list", obj).then(res => {
      console.log("/acl_resource/list", res.data);
      _self.data1[0].children = res.data;
    });
  },
  mounted() {},
  computed: {},
  methods: {
    ...mapMutations([
      "resourceEditModalMut", //编辑资源模态框
      "resourceOneMut" //获取当前选中的资源
    ]),
    //树的操作
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%"
          }
        },
        [
          h("span", [
            h("Icon", {
              class: "ivu-icon ivu-icon-ios-photos",
              style: {
                marginRight: "5px"
              }
            }),
            h("span", data.title)
          ]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "20px"
              }
            },
            [
              h(
                "Button",
                {
                  class: "ivu-btn ivu-btn-primary",
                  style: {
                    width: "45px",
                    padding: 0,
                    marginRight: "10px"
                  }
                },
                [
                  h("Icon", {
                    class: "ivu-icon ivu-icon-md-add",
                    style: {
                      width: "45px",
                      lineHeight: "30px"
                    },
                    on: {
                      click: () => {
                        this.resourceAdd(data); //新增
                      }
                    }
                  })
                ]
              ),
              h(
                "Button",
                {
                  class: "ivu-btn ivu-btn-primary",
                  style: {
                    width: "45px",
                    padding: 0,
                    marginRight: "10px"
                  }
                },
                [
                  h("Icon", {
                    class: "ivu-icon ivu-icon-md-remove",
                    style: {
                      width: "45px",
                      lineHeight: "30px"
                    },
                    on: {
                      click: () => {
                        this.resourceRemove(root, node, data); //删除
                      }
                    }
                  })
                ]
              ),
              h(
                "Button",
                {
                  class: "ivu-btn ivu-btn-primary",
                  style: {
                    width: "45px",
                    padding: 0
                  }
                },
                [
                  h("Icon", {
                    class: "ivu-icon ivu-icon-md-create",
                    style: {
                      width: "45px",
                      lineHeight: "30px"
                    },
                    on: {
                      click: () => {
                        this.resourceEdit(root, node, data); //编辑
                      }
                    }
                  })
                ]
              )
            ]
          )
        ]
      );
    },
    //新增
    resourceAdd(data) {
      const children = data.children || [];
      children.push({
        title: "新增节点",
        expand: true
      });
      this.$set(data, "children", children);
    },
    //删除
    resourceRemove(root, node, data) {
      const parentKey = root.find(el => el === node).parent;
      const parent = root.find(el => el.nodeKey === parentKey).node;
      const index = parent.children.indexOf(data);
      parent.children.splice(index, 1);
    },
    //编辑
    resourceEdit(root, node, data) {
      this.resourceEditModalMut({
        state: true
      }); //编辑资源模态框
      this.resourceOneMut({
        state: data
      }); //获取当前选中的资源
    },
    //保存
    resourceSave() {
      let _self = this;
      console.log("data", this.data1[0].children);
      let obj = {
        list: this.data1[0].children
      };
      this.$axios.post("/acl_resource/resourceSave", obj).then(res => {
        console.log("返回值：", res.data);
        if (res.data) {
          _self.$Message.success("保存成功");
        } else {
          _self.$Message.error("保存失败");
        }
      });
    }
  },
  components: {
    // Row,
    // XCol: Col,
    // Tree,
    // Button,
    // Divider,
    ResourceEdit
  }
};
</script>
